<template>
      <div>
    <myheader></myheader>

    <section class="featured-block text-center">
      <div class="container">

        <div>
          <Breadcrumb :datas="datas"></Breadcrumb>
        </div>

        <div>
          <img :src="src">
          <Avatar :src="src" :width="150" fit="fill"></Avatar>
        </div>

        <div>
          <table>
            <tr>
              <td>用户头像：</td>
              <td>
                <input type="file" @change="upload">
              </td>
            </tr>
          </table>
        </div>

        <div>
           <table>

          <tr>
            <td style="padding: 5px;">
              七牛云上传:
            </td>
            <td style="padding: 5px;">
              <input type="file" @change="upload_qiniu" />
            </td>
            <td>
              <input type="file" @change="upload_qiniu">
              <br>
              <!--进度条标签-->
              <Progress v-show="load_int" :percent="load_int" color="green">
                <span slot="text"> {{ load_int }}%</span>
              </Progress>
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">
              七牛云上传视频：
            </td>
            <td style="padding: 5px;">
              <video id="video" v-show="videosrc" width="300" height="200" :src="videosrc" controls="controls" autoplay="autoplay" muted loop="loop"></video>
            </td>
          </tr>
          <tr>
            <td style="padding: 5px;">

            </td>
            <td style="padding: 5px;">
              <Button @click="changepic" color="red">{{ mybutton }}</Button>
            </td>
          </tr>

          <tr>
            <td style="padding: 5px;">
              又拍云上传:
            </td>
            <td style="padding: 5px;">
              <input type="file" @change="upload_upyun" />
              <div class="upload">
                拖拽上传
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <img :src="src" width="50" height="25">
              <Button color="red" @click="deletes">删除</Button>
              &emsp;&emsp;
              <input type="text" v-model="upmkdir" /><Button color="blue" @click="upyun">创建目录</Button>
            </td>

          </tr>
        </table>
        </div>

      </div>
    </section>

    <mytail></mytail>
  </div>
</template>

<script>
    //导入组件
  import myheader from './myheader'
  import mytail from './mytail'
    import Avatar from 'heyui/lib'
    // 导入文件
  import {config,formatXml} from "../config.js"


    export default {
        name: "myprofile",
      data:function () {
        return{
          //面包屑导航变量
          datas:[{title:'首页', route: {name:'index'}}, {title:'用户中心'}],

          src:'',

          // 七牛云token
          token:"",
          //视频播放地址
          videosrc:"",
          // 切换按钮变量
          mybutton:"进入画中画",
          //又拍云目录名称
          upmkdir:'',
          filename:'',
          //整型进度
          load_int:0,
          //上传进度展示
          load_percent:'',
        }
      },

      //注册组件标签
      components:{
          'myheader': myheader,
          'mytail': mytail,
      },

      mounted:function(){

        // 获取最新的token
        this.get_token()
        //调用用户信息接口
        this.get_userinfo()

        let upload = document.querySelector('.upload')
        upload.addEventListener('dragenter', this.onDrag, false)
        upload.addEventListener('dragover', this.onDrag, false)
        upload.addEventListener('drop', this.onDrag, false)

      },


      methods: {
        //用户信息接口
        get_userinfo:function(){
          this.axios({
            url:'http://localhost:8000/userinfo/',
            method:'get',
            params:{uid:localStorage.getItem('uid'),jwt:localStorage.getItem("jwt")}
          }).then((res)=>{
            this.src = 'http://localhost:8000/static/upload/' + res.data.img
          })

        },
        //删除
        deletes:function(){
          this.axios({
            url:'http://127.0.0.1:8000/upy/',
            method:'delete',
            params: {filename:localStorage.getItem('filename')}
          }).then((res)=>{
            console.log(res)
          })
        },

        //创建又拍云目录
        upyun:function(){
          this.axios({
            url:'http://127.0.0.1:8000/upy/',
            method:'get',
            params:{upmkdir: this.upmkdir}
          }).then((res)=>{
            console.log(res)
          })
        },

        // 监听用户鼠标
        onDrag(e){
          e.stopPropagation()
          e.preventDefault()
        },
        onDrag(e){
          e.stopPropagation()
          e.preventDefault()
          this.upload_upyun(e.dataTransfer.files)
        },
        // 拖拽上传又拍云
        upload_upyun:function(files){
          // 获取拖拽文件对象
          let file = files[0]

          // 声明参数
          let param = new FormData()
          param.append('file',file)
          const config = {
              headers:{'Content-Type': 'multipart/form-data'}
          }
          this.axios.post('http://127.0.0.1:8000/ypyun/', param, config) // 上传图片
          .then(function(response){
            console.log(response)
          })
        },

        // 定义画中画切换
        changepic:function(){
          if(video !== document.pictureInPictureElement){
            // 尝试进入画中画
            video.requestPictureInPicture()
            this.mybutton = "退出画中画"
          }else{
            // 退出画中画
            document.exitPictureInPicture()
            this.mybutton = "进入画中画"
          }
        },

        get_token:function(){

          //发送请求
          this.axios.get('http://127.0.0.1:8000/qiniu/').then((result)=>{

            console.log(result)

            this.token = result.data.token

            console.log(this.token)

          })

        },
        // 七牛云上传
        upload_qiniu:function(e){
          // 获取文件
          let file = e.target.files[0]
          // 声明表单参数
          let param = new FormData()

          param.append("file",file,file.name)
          param.append("token",this.token)

          // 自定义axios
          const axios_qiniu = this.axios.create({withCredentials:false})

          // 发送请求
          axios_qiniu({
            method: "POST",
            url: "http://up-z1.qiniu.com/",
            data:param,
            timeout:30000
          }).then(result =>{
            console.log(result)
            this.src = "http://q9lfopyn9.bkt.clouddn.com/"+result.data.key
            this.videosrc = config['baseurl']+result.data.key
          })
        },

        //定义上传事件  上传文件等必须带e e为系统自带
        upload:function (e) {
          // 获取文件
          let file = e.target.files[0];

          // 声明表单数据
          let formdata = new FormData();
          formdata.append('file', file, file.name);  // 文件的key, 文件实体， 文件名称

          let uid = localStorage.getItem('uid');
          formdata.append('uid', uid);

          //声明请求头
          let config = {headers:{'Content-Type': 'multipart/form-data'}};

          // 后台请求接口
          this.axios({
            url: 'http://localhost:8000/uploadfile/',
            method: 'post',
            data:formdata
          }).then(res=>{
            if(res.data.code===200){
              console.log(res.data.message);
              // 展示赋值
              this.src = "http://localhost:8000/static/upload/" + res.data.img;
            }else {
              console.log(res.data.message)
            }
          })

        }
      }
    }
</script>

<style scoped>

</style>
